<template>
  <div class="historical_task_content w100 dark_table">
    <Search></Search>
    <el-table
      v-adaptive="{ bottomOffset: 1 }"
      :data="tableData"
      style="width: 100%"
      border
      height="100px"
      size="small"
    >
      <el-table-column
        show-overflow-tooltip
        prop="taskNumber"
        label="任务号"
        align="center"
      />

      <el-table-column
        show-overflow-tooltip
        prop="deviceName"
        label="设备名称"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.deviceName || "--" }}
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        prop="chargeInTime"
        label="装炉时间"
        width="170"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.chargeInTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="出炉时间"
        align="center"
        width="170"
      >
        <template slot-scope="scope">
          {{ scope.row.outTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="零件号" align="center">
        <template slot-scope="scope">
          {{ scope.row.partNumber || "--" }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="batchNumber"
        label="批次号"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.batchNumber || "--" }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="processNumber"
        label="工序号"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.processNumber || "--" }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="processName"
        label="工序名称"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.processName || "--" }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="realPartCount"
        label="装炉件数"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.realPartCount || "--" }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="materialMark"
        label="材料牌号"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.materialMark || "--" }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="craftVersion"
        label="工艺版次"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.craftVersion || "--" }}
        </template>
      </el-table-column>
      <el-table-column label="是否合格" align="center">
        <!-- eslint-disable-next-line -->
        <template slot-scope="scope">
          <!-- warning -->
          <el-tag v-if="!scope.row.state" size="small" type="success"
            >合格</el-tag
          >
          <el-tag v-else size="small" type="warning">不合格</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-if="scope.row.state"
            size="small"
            @click="handleCheck(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <OriginalDialog
      :formula-record-infos-list="formulaRecordInfosList"
      :row="row"
      :visible.sync="visible"
      :assignmentToken="assignmentToken"
    /> -->
    <UnqualifiedDialog
      :formula-record-infos-list="formulaRecordInfosList"
      :row="row"
      :visible.sync="visible"
    ></UnqualifiedDialog>
  </div>
</template>

<script>
import Search from "./components/Search.vue";
import OriginalDialog from "./components/OriginalDialog.vue";
import {
  formulaRecordInfos,
  getDevicesV2Tree,
  getTaskFeedback
} from "@/api/deviceOperation";
import { getTreeNode } from "@/views/centralizedControl/js/utils";
import { getTaskDownLoadInfos } from "@/api/deviceOperation";
import UnqualifiedDialog from "./components/Unqualified.vue";

export default {
  components: { Search, OriginalDialog, UnqualifiedDialog },
  data() {
    return {
      tableData: [],
      row: {},
      formulaRecordInfosList: [],
      visible: false,
      treeData: [],
      assignmentToken: ""
    };
  },
  computed: {},
  async mounted() {
    this.init();
    this.getDevicesV2Tree();
  },
  methods: {
    async getDevicesV2Tree() {
      const res = await getDevicesV2Tree();
      this.treeData = res.data;
    },
    async handleCheck(row) {
      if (!row.state) return;
      // 查出来原始配方信息
      // const downRes = await getTaskDownLoadInfos({
      //   formulaDownid: row.formulaDownId
      // });
      // const dowResults = downRes.data.results;
      // // 设置原始配方
      // const formulaParameter = dowResults.length
      //   ? dowResults[0].formulaParameter
      //   : [];
      // // 找出对应的设备 然后取出分配id 去查曲线
      // const treeObj = getTreeNode(this.treeData, row.deviceToken);
      // if (treeObj) {
      //   this.assignmentToken = treeObj.assignmentToken;
      // } else {
      //   console.warn("未找到设备");
      // }
      // console.log("formulaParameter :>> ", formulaParameter);
      // this.row = _.cloneDeep(row);
      // // 远程监控的曲线表格
      // const res = await formulaRecordInfos({
      //   formulaDownid: row.formulaDownId
      // });
      // const { results } = res.data;
      // // 拼接原始数据到表格内
      // // formulaParameter
      // results.forEach(item => {
      //   formulaParameter.forEach(f => {
      //     // 此处注意 有些原始配方的阶段号 可能是0开始的
      //     if (item.stageId == f.orderNum + 1) {
      //       f.keys.forEach((key, keyIndex) => {
      //         this.$set(item, key, f.values[keyIndex]);
      //       });
      //     }
      //   });
      // });
      // console.log("results :>> ", results);
      // this.formulaRecordInfosList = _.sortBy(results, ["stageId"]);
      this.row = _.cloneDeep(row);
      this.visible = true;
    },
    async init() {
      this.tableData = [];
      const res = await getTaskFeedback({
        deviceToken: ""
      });
      const { results, numResults } = res.data;
      results.push({
        state: true,
        metadata: {},
        id: "037d07b1-dbbe-4c07-9cda-117aaf6b1589",
        token: "20221213-s10.15.2438-22-12-100-15-01-0-00",
        createdDate: "2022-12-13T11:06:10.182+08:00",
        updatedDate: "2022-12-14T03:26:27.986+08:00",
        deviceToken: "1308032",
        deviceName: "15",
        unit: "",
        manufactureSite: "常规单元",
        taskNumber: "20221213-s10.15.2438-22-12-100-15-01-0-00",
        parentTaskNumber: "20221213-s10.15.2438-22-12-100-15-01-0-00",
        formulaDownId: "20221213-s10.15.2438-22-12-100-15-01-0-00",
        batchNumber: "22-12-100",
        partNumber: "s10.15.2438",
        partName: "螺栓",
        processNumber: "1",
        processName: "淬火",
        materialMark: "1Cr11Ni2W2MoV",
        craftVersion: "SD001",
        userName: "ADHMI",
        userJobNumber: "Admin",
        startTime: "2022-12-13T11:06:11.000+08:00",
        realPartCount: 2,
        taskStatus: "2",
        completeTime: "2022-12-14T03:26:28.000+08:00",
        entrustProcessNumber: "",
        model: "",
        chargeInTime: "2022-12-11 11:00:00",
        outTime: "2022-12-11 14:10:25"
      });

      this.tableData = results;
    }
  }
};
</script>

<style lang="scss" scoped>
.historical_task_content {
  position: relative;
  color: #fff;
  padding: 0 20px 20px 20px;
  background: url(../../../assets/images/applicationCenter/app_bg.jpg) no-repeat
    100%;
  background-size: cover;

  /deep/ .el-tabs__header {
    margin-bottom: 4px;

    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
    }
  }

  /deep/ {
    .el-tabs__item {
      color: #fff;
    }

    .el-tabs__item.is-active {
      color: #409eff;
    }

    .el-tabs__nav-wrap::after {
      background-color: transparent;
    }
  }
}
</style>
